

import React, { Component, PureComponent } from 'react'

import { Button, Tooltip, Pagination, Table, Tag, Space, Drawer, DatePicker, Form, Input } from 'antd';
import { SearchOutlined, CaretDownOutlined } from '@ant-design/icons';
import { Layout, Popover } from 'antd';
import withAuthDom from '@/components/withAuthDom'
import { nanoid } from 'nanoid'
const AuthButton = withAuthDom(Button)

export default class HorizonButtonList extends Component {

  state = {
    visible: false
  }

  handleVisibleChange = visible => {
    this.setState({ visible });
  }

  moreBtns = () => {
    const { btnList = [], getBtnDisabled = () => { }, handleBtnClick = () => { } } = this.props
    return (<Space direction="vertical">
      {
        btnList.slice(6).map(item => {
          const ButtonIcon = item.icon
          return (<AuthButton
            key={item.id}
            size='small'
            block
            onClick={() => { this.setState({visible: false}); handleBtnClick(item) }}
            disabled={getBtnDisabled(item.id)}
            type={item.type || 'primary'}
            danger={item.danger}
            children={item.label}
            permission={item.permission}
            icon={<ButtonIcon />} />)
        })
      }
    </Space>)
  }

  render(){
    const { btnList = [], getBtnDisabled = () => { }, handleBtnClick = () => {} } = this.props
    return (<Space size={[0, 0]} wrap className="clearBoth">
            {
              btnList.slice(0, 6).map((item, index) => {
                const ButtonIcon = item.icon
                return (<AuthButton
                  key={index}
                  size='small'
                  onClick={() => { handleBtnClick(item) }}
                  disabled={getBtnDisabled(item.id)}
                  type={item.type || 'primary'}
                  danger={item.danger}
                  children={item.label}
                  permission={item.permission}
                  icon={<ButtonIcon />} />)
              })
            }
            {
        btnList.length > 6 && <Popover
              placement="bottom"
              onVisibleChange={this.handleVisibleChange}
              content={this.moreBtns()}
              trigger="click"
              visible={this.state.visible}>
          <Button size="small" type="primary" icon={<CaretDownOutlined />}>更多</Button>
              </Popover>
            }
          </Space>)
  }

}